<template>
  <div>
    <h1>App组件</h1>
    <hr>
    <a href="#/home">首页</a><br>
    <a href="#/move">电影页</a><br>
    <a href="#/about">详情页</a>
    <br>
    <br>
    <component :is="className"></component>
  </div>
</template>

<script>
// 导入组件
import myHome from '@/components/myHome.vue'
import myMove from '@/components/myMove.vue'
import myAbout from '@/components/myAbout.vue'
export default {
  components: {
    myHome,
    myMove,
    myAbout
  },
  data () {
    return {
      className: 'myMove'
    }
  },
  created () {
    // 监听 hash 地址的变换 来判断用户点击的是哪个 hash 地址
    window.onhashchange = () => {
      console.log('监听到了 hash 地址的变化' + location.hash)
      if (location.hash === '#/home') {
        this.className = 'myHome'
      } else if (location.hash === '#/move') {
        this.className = 'myMove'
      } else {
        this.className = 'myAbout'
      }
    }
  }
}
</script>

<style>

</style>
